<template>
  <div id="app">
    <van-nav-bar fixed title="计算机课程学习情况问卷系统"/>
    <transition name="van-fade" mode="out-in">
      <router-view></router-view>
    </transition>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="shop"  style="cursor: pointer" @click="jump('/home')">主页</van-tabbar-item>
      <van-tabbar-item icon="exchange"  style="cursor: pointer" @click="jump('/data')">答题记录</van-tabbar-item>
      <van-tabbar-item icon="contact"  style="cursor: pointer" @click="jump('/loginUser')" v-if="!user.isLogin">注册</van-tabbar-item>
      <van-tabbar-item icon="contact"  style="cursor: pointer" @click="exit()" v-else>注销</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
export default {
  name: 'App',
  data () {
    return {
      active: 0,
      path: ''
    }
  },
  computed:{
    ...mapState([
      'user'
    ])
  },
  mounted () {
    this.path = this.$route.path;
    if (this.path === '/home') {
      this.active = 0
    } else if (this.path === '/data') {
      this.active = 1
    } else if (this.path === '/user') {
      this.active = null
    } else if (this.path === '/loginUser') {
      this.active = 2
    }
  },
  methods:{
    jump(url){
      if(url=='/data'){
        //判断是否登录
        if(this.$store.state.user.isLogin){
          this.$router.push(url);
        }else {
          this.$router.push('/user');
        }
      }else {
        this.$router.push(url);
      }
    },
    exit(){
      this.$store.commit('set_userid',{id:'',isLogin:false});
    }
  }
}
</script>

<style>
  .top {
    height: 46px;
  }
  .bottom {
    height: 46px;
  }
</style>
